<template>
  <!--  市场和门店树-->
  <div style="padding-top: 5px;">
    <el-input v-model="filterDeptSearch" placeholder="搜索公司"/>
    <el-tree :data="deptTreeData" :props="defaultDeptTreeProps" node-key="id" :filter-node-method="filterNode"
             @node-click="handleNodeClick" default-expand-all :highlight-current="true"
             accordion
             :expand-on-click-node="false"
             style="border: 1px;padding: 2px;margin: 2px;" ref="treeRef">
    </el-tree>
  </div>
</template>

<script lang="ts" setup>
import {ElMessageBox, ElTree} from 'element-plus'
import {onMounted, ref, watch} from 'vue'
import {Dept} from "@/apis/model/system/DeptModel";
import {deptLoop} from "@/apis/http/system/DeptHttp";

const emits = defineEmits(['businessMarketTreeClick']);

// 机构树
const deptTreeData: any = ref<Array<Dept>>([])
const filterDeptSearch = ref('')
const treeRef = ref<InstanceType<typeof ElTree>>()
watch(filterDeptSearch, (val) => {
  treeRef.value!.filter(val)
})
const filterNode = (value: string, data: Dept) => {
  if (!value) return true
  return data.deptName.includes(value)
}

const defaultDeptTreeProps = {
  children: 'children',
  label: 'deptName',
}

const initDept = () => {
  deptLoop().then(res => {
    const code = res.code
    const message = res.message
    const data = res.data
    if (code == 200) {
      deptTreeData.value = data
    }
  })
}

// 这个打印出来的是node
const handleNodeClick = (node: any) => {
  // deptId 机构编号
  emits('businessMarketTreeClick',{
    deptId: node.id
  })
}

onMounted(() => {
  initDept()
})
</script>

<style>
</style>